<template>
    <transition name="slider">
        <div class="search-detail">
            <m-header :canreturn=true :type="2" :keyword='defaultData.keyword' @search="onSearchGame"></m-header>
            <div class="hot-search" v-show="!loading" v-if="!searchApps.length">
                <div class="search-title">
                    <h3>热门搜索</h3>
                </div>
                <div class="hot-game">
                    <router-link :to="{ path:'/'+$route.query.address+'/search/gamedetail/'+item.id,query: { commentAddress: '/'+$route.query.address+'/search/gamedetail' }}" v-for=" (item,index) in defaultData.searchDefaultApps " :key=index>
                        <img v-lazy="item.icon " alt=" ">
                    </router-link>
                </div>
                <div class="search-title" v-show="history.length">
                    <h3>搜索记录</h3>
                    <p @click="clearHistory">
                        清除记录
                        <span class="icon "><img src="./shanchu.png" alt=" "></span>
                    </p>
                </div>
                <div class="search-record ">
                    <div class="record-item" v-for="(searhis,index) in history" :key="index">{{searhis}}</div>
                </div>
            </div>
            <scroll class="s-d-wrapper" :listenScroll=true :data=refreshScroll>
                <div>
                    <div class="s-d-game-item" v-show="searchApps.length">
                        <div class="item" v-for="(game,index) in searchApps" :key=index @click="goGameDetail(game.id)">
                            <div>
                                <div class="icon">
                                    <img v-lazy="game.icon" alt="">
                                </div>
                                <div class="item-content">
                                    <h3>{{game.name}}</h3>
                                    <div class="star">
                                        <div class="star-wrapper">
                                            <span class="star-icon" :style="{ width: game.star*20+'%' }"></span>
                                        </div>
                                        <p class="score">{{game.size}}MB</p>
                                        <div class="type">
                                            <span class="game-desc" v-for="(type,index) in game.tagNames" :key=index>{{type}}</span>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <button class="downbtn">详情</button>
                        </div>
                    </div>
                </div>
            </scroll>
            <router-view></router-view>
            <div class="loading-container" v-show="loading">
                <loading></loading>
            </div>
        </div>
    </transition>

</template>

<script type="text/ecmascript-6">
import MHeader from 'components/m-header/m-header';
import Loading from '@/base/loading/loading';
import Scroll from '@/base/scroll/scroll';
import { getCommonInfo, getCommonInfoHasData } from '@/base/api/indexpage/getindexinfo';
import { setLocalStorage, getLocalStorage } from '@/common/js/storage';
import GameList from '@/base/gamelist/gamelist';

const SEARCHHISTORY = 'SEARCHHISTORY';
export default {
    data() {
        return {
            defaultData: [],
            searchApps: [],
            history: [],
            loading: true,
            refreshScroll: 0,
        };
    },
    created() {
        this._getCommonInfo();
        this._showSearchHistory();
    },
    methods: {
        goGameDetail(gameid) {
            this.$router.push({
                path: `/${this.$route.query.address}/search/gamedetail/${gameid}`,
                query: {
                    commentAddress: `/${this.$route.query.address}/search/gamedetail`,
                },
            });
        },
        _getCommonInfo() {
            const address = '/search/game';
            getCommonInfo(address).then((res) => {
                this.loading = false;
                this.defaultData = res;
                console.log(this.defaultData);
            });
        },
        onSearchGame(searchVals) {
            this.loading = true;
            console.log(this.loading);
            const address = '/search/game';
            let data = {
                keyword: searchVals,
            };
            getCommonInfoHasData(address, data).then((res) => {
                console.log(res);
                this.loading = false;
                this.searchApps = res.searchApps;
                this.refreshScroll++;
            });
            //  添加搜索内容到搜索历史
            this.setSearchHistory(searchVals);
        },
        setSearchHistory(val) {
            let searchHis = getLocalStorage(SEARCHHISTORY);
            if (searchHis) {
                searchHis += `&${val}`;
                this.history = searchHis.split('&');
            } else {
                searchHis = val;
                this.history.push(searchHis);
            }
            this.history = this.unique(this.history);
            setLocalStorage(SEARCHHISTORY, this.history.join('&'));
        },
        _showSearchHistory() {
            if (getLocalStorage(SEARCHHISTORY)) {
                this.history = getLocalStorage(SEARCHHISTORY).split('&');
            }
        },
        clearHistory() {
            this.history = [];
            setLocalStorage(SEARCHHISTORY, '');
        },
        unique(array) {
            let r = [];
            for (let i = 0, l = array.length; i < l; i++) {
                for (let j = i + 1; j < l; j++) {
                    if (array[i] === array[j]) j = ++i;
                }
                r.push(array[i]);
            }
            return r;
        },
    },
    components: {
        MHeader,
        Loading,
        GameList,
        Scroll,
    },
};
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
@import '~common/stylus/variable';
@import '~common/stylus/mixin';

slider();

.search-detail {
    position: fixed;
    top: 0;
    bottom: 0;
    width: 100%;
    background: $color-background;
    background: #ffffff;
    z-index: 10;

    .hot-search {
        padding: 15px;
        font-size: $font-size-medium-x;
        color: $color-font;

        .search-title {
            width: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;

            h3 {
                width: 30%;
            }

            p {
                width: 20%;
                font-size: $font-size-small;
                text-align: right;
                padding-right: 2px;

                .icon {
                    img {
                        width: 12px;
                        transform: translate3d(2px, 2px, 0);
                    }
                }
            }
        }

        .hot-game {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 0;

            a {
                width: 76px;
                height: 76px;
                background: #b8b7b7;
                border-radius: 12px;

                img {
                    display: block;
                    width: 100%;
                    height: 100%;
                }
            }
        }

        .search-record {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;

            .record-item {
                margin-top: 15px;
                height: 30px;
                width: 80px;
                border-radius: 15px;
                background: #eeeeee;
                text-align: center;
                line-height: 30px;
                font-size: $font-size-small;
                margin-left: 10px;
            }
        }
    }

    .s-d-wrapper {
        height: calc(100% - 44px);
        overflow: hidden;

        .s-d-game-item {
            padding: 15px 15px;

            .item {
                display: block;
                height: 100px;
                padding-top: 1px;
                box-sizing: border-box;
                position: relative;
                text-decoration: none;
                border-bottom: 1px solid #eeeeee;

                .icon {
                    height: 80px;
                    position: absolute;
                    left: 0;
                    top: 9px;

                    img {
                        height: 100%;
                    }
                }

                .item-content {
                    margin-left: 100px;

                    h3 {
                        font-size: $font-size-large;
                        margin: 0;
                        color: #333333;
                        padding: 10px 0 0 0;
                    }

                    .star {
                        .star-wrapper {
                            width: 50px;
                            display: inline-block;
                            height: 10px;
                            position: relative;
                            overflow: hidden;

                            .star-icon {
                                position: absolute;
                                left: 0;
                                top: 0;
                                display: inline-block;
                                height: 10px;
                                background: url('./star.png');
                                background-size: 10px 10px;
                            }
                        }

                        .score {
                            font-size: $font-size-small;
                            padding: 3px 0;
                            color: $color-font;
                        }
                    }
                }

                .type {
                    margin-top: 4px;

                    .game-desc {
                        box-sizing: border-box;
                        width: 34px;
                        height: 15px;
                        border: 1px solid #febf01;
                        border-radius: 5px;
                        font-size: $font-size-small;
                        color: #febf01;
                        padding: 2px 4px;
                        margin-right: 6px;
                    }
                }

                .downbtn {
                    position: absolute;
                    right: 0;
                    top: 30px;
                    downloadbtn();
                }
            }
        }
    }

    .loading-container {
        loading();
    }
}
</style>
